<template>
  <!--  -->
  <el-drawer
    :model-value="drawer"
    :with-header="false"
    :before-close="handleClose"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    body-class="drawer-body"
    :size="props.size"
    :append-to-body="props.appendToBody"
  >
  <!-- 头部 -->
    <slot name="header">
      <div class="drawer-title flex justify-between items-center">
        <div>添加自定义用户组</div>
        <div @click="drawer = false">关闭</div>
      </div>
    </slot>
    <!-- 默认插槽（内容区域） -->
    <slot></slot>
  </el-drawer>
</template>
<script setup lang="ts">
import { ref, watch, onMounted } from 'vue'

const drawer = ref(false) // 抽屉
const props = defineProps<{ 
  modelValue?: boolean,
  size?: string,
  appendToBody?: boolean
}>()
const emits = defineEmits<{
  (e: 'update:modelValue', value: boolean): void
}>()

watch(() => props.modelValue, (val) => {
  drawer.value = val
})

watch(() => drawer.value, (val) => {
  emits('update:modelValue', val)
})

onMounted(() => {

})


const handleClose = (done: () => void) => {
  done()
}

</script>

<style lang="scss" scoped>
.drawer-title {
  background-color: #2b2b2b;
  padding: 10px;
  margin-bottom: 20px;
}
</style>
